<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_state属性</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        /*
        * React里的props和state
        * props:react里的组件输入属性，类似于vue里的prop或者小程序里的properties，作用都是从外界接受传入到组件内部的数据并展示
        *   特点：
        *       1、props在函数组件里为第一个形参，在class组件里是内置
        *       2、props本身只读，不可修改
        *
        * state:react里的组件状态数据对象，类似于vue里的data或者小程序里的data，作用为执行组件里的逻辑数据
        *   特点：
        *       1、state属性也是内置的，但是需要初始化
        *       2、state是读写性的
        *       3、state在修改的时候，为了让react重新渲染页面，所以不可以直接修改，需要调用setState方法修改
        * */
        let app = document.getElementById("app")
        class Child1 extends React.Component{
            constructor(props){
                super(props);
                // 初始化state，如果有需要初始化constructor的话，可以将state写在里面，如果没有的话也可以直接写在外面
                this.state = {
                    sMsg : "993，晚上去酒吗？"
                }
            }
            // state={
            //     sMsg : "993，晚上去酒吗？"
            // }
            render(){
                return <fieldset>
                    <legend><h2>Child1组件</h2></legend>
                    <h3>显示props的数据为:{this.props.pMsg}</h3>
                    <button onClick={()=>this.changeProps()}>点击修改props的数据</button>
                    <h3>显示state的数据为:{this.state.sMsg}</h3>
                    <button onClick={()=>this.changeState()}>点击修改state的数据</button>
                </fieldset>
            }
            changeProps(){
                this.props.pMsg="不，你应该改bug"
            }
            changeState(){
                //修改state
                console.log(this)
                this.setState({
                    sMsg: "不，晚上要和兄弟去逛该"
                })
            }
        }

        let pMsg= "黑侠，晚上打🎴吗？"


        ReactDOM.render(<Child1 pMsg={pMsg}/>,app)
    </script>
</body>
</html>